<template>
  <div class="login_container">
    <!-- 表单区域 -->
    <van-form @submit="onSubmit" class="form">
      <div class="wel">
        <span>Welcome</span>
      </div>
      <van-cell-group inset class="cell-group">
        <van-field
          class="van-field-input"
          name="username"
          placeholder="请输入用户名"
          left-icon="manager"
          v-model="username"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          class="van-field2 van-field-input"
          type="password"
          name="password"
          placeholder="请输入密码"
          left-icon="lock"
          v-model="password"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div class="submit_btn">
          <van-button
            block
            type="primary"
            native-type="submit"
            :loading="loading"
            loading-text="登录中..."
          >
            登录
          </van-button>
        </div>
      </van-cell-group>
    </van-form>
  </div>
</template>

<script>
import { reactive, ref, toRefs } from "vue";
import { login } from "../../api/user";
import { useRouter } from "vue-router";
import { setToken } from "../../utils/authToken";
import { toast } from "../../utils/vanToast";

export default {
  setup() {
    //使用路由导航
    const router = useRouter();

    // 定义登录请求的数据
    const user = reactive({
      username: "",
      password: "",
    });

    //设置加载状态
    let loading = ref(false);
    // 1、构建登录请求
    // 2、获取用户名和密码发送到服务端
    const onSubmit = () => {
      loading.value = true;
      login(user.username, user.password)
        .then((res) => {
          // console.log("登录成功", res);
          //提示登录状态
          toast("登录成功!");
          //存储 token 和用户的信息
          setToken(res.token);
          //跳转到后台首页
          router.push("/home");
        })
        .finally(() => {
          loading.value = false;
        }); //无论最终是否请求到数据，都停止加载动画

      /*使用 async 和 await 来简化操作*/
      // const res = await login(user.username, user.password);
      // if (res.errorCode === 20000) return Toast.fail("登录失败！");
      // Toast.success("登录成功！");
      // console.log(res);
    };
    //将数据返回在模板中进行使用
    return {
      // 解构后的数据为非响应式，所以需要使用 toRefs 来转为响应式才能再次被使用
      ...toRefs(user),
      onSubmit,
      loading,
    };
  },
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.login_container {
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: url(../../assets/images/BG_20221027090350_001.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  .form {
    width: 100%;
    position: absolute;
    margin: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .wel {
      text-align: center;
      margin-bottom: 1rem;
      color: #fff;
      font-size: 1.125rem;
      font-weight: bold;
      letter-spacing: 0.125rem;
    }
    .van-cell-group {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 6.5rem;
      margin: 0.375rem;
      padding: 0.5rem;
      background: rgba(255, 255, 255, 0.5);
      backdrop-filter: blur(0.1875rem);
      .van-field-input {
        padding-left: 0.1875rem;
        outline: none;
        height: 1rem;
        margin-bottom: 0.375rem;
        line-height: 1rem;
        border: 0;
      }
      .submit_btn {
        width: 100%;
        margin: 16px;
        margin-top: 1rem;
      }
    }
  }
}
</style>
